<template>
  <div class="app-container">
    <div class="application-container">
      <h2 class="page-title">{{ pageTitle }}</h2>
      
      <el-card class="application-form" v-if="!hasApplication">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="教员姓名" prop="teacherName">
          <el-input v-model="form.teacherName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="照片" prop="avatar">
          <image-upload v-model="form.avatar" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input-number v-model="form.age" :min="18" :max="60" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="申请辅导科目" prop="subject">
          <el-input v-model="form.subject" placeholder="请输入申请辅导科目" />
        </el-form-item>
        <el-form-item label="最高学历" prop="education">
            <el-select v-model="form.education" placeholder="请选择最高学历">
              <el-option label="本科" value="本科" />
              <el-option label="硕士研究生" value="硕士研究生" />
              <el-option label="博士研究生" value="博士研究生" />
            </el-select>
        </el-form-item>
        <el-form-item label="所在学校" prop="school">
          <el-input v-model="form.school" placeholder="请输入所在学校" />
        </el-form-item>
        <el-form-item label="所学专业" prop="major">
          <el-input v-model="form.major" placeholder="请输入所学专业" />
        </el-form-item>
        <el-form-item label="资格证书" prop="certification">
          <el-input v-model="form.certification" placeholder="请输入资格证书" />
        </el-form-item>
        <el-form-item label="教学经历" prop="teachingExp">
            <el-input v-model="form.teachingExp" type="textarea" :rows="4" placeholder="请输入教学经历" />
        </el-form-item>
        <el-form-item label="个人介绍" prop="introduction">
            <el-input v-model="form.introduction" type="textarea" :rows="4" placeholder="请输入个人介绍" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="期望时薪" prop="hourlyRate">
          <el-input v-model="form.hourlyRate" placeholder="请输入期望时薪" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交申请</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      </el-card>

      <el-card class="application-status" v-else>
        <div class="status-content">
          <div class="status-indicator">
            <el-progress 
              type="dashboard" 
              :percentage="statusPercentage"
              :color="statusColor"
              :width="120"
            >
              <template #default>
                <div class="progress-label">
                  <i :class="statusIcon" />
                  <div class="status-tag status-tag--pending">{{ applicationStatus }}</div>
                </div>
              </template>
            </el-progress>
          </div>
          <div class="status-header">
            <div>
              <h3>{{ pageTitle }}</h3>
              <el-tag :type="statusTagType" effect="dark">{{ applicationStatus }}</el-tag>
            </div>
            <div>
              <el-button type="primary" @click="showApplicationDetail">查看详情</el-button>
              <el-button 
                type="warning" 
                @click="showEditDialog"
                v-if="currentApplication.status !== 'approved'"
                >修改资料
              </el-button>
            </div>
          </div>
          <el-divider />
          <div class="basic-info">
            <el-row :gutter="20">
              <el-col :span="12">
                <p><i class="el-icon-user"></i><span>姓名：</span>{{ currentApplication.teacherName }}</p>
                <p><i class="el-icon-time"></i><span>申请时间：</span>{{ parseTime(currentApplication.applicationTime, '{y}-{m}-{d}') }}</p>
              </el-col>
              <el-col :span="12">
                <p><i class="el-icon-mobile-phone"></i><span>联系方式：</span>{{ currentApplication.phoneNumber }}</p>
                <p><i class="el-icon-wallet"></i><span>期望时薪：</span>¥{{ currentApplication.hourlyRate }}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>

      <!-- 申请详情对话框 -->
      <el-dialog title="申请详情" :visible.sync="detailDialogVisible" width="700px">
        <div class="detail-content">
          <div class="detail-item">
            <span class="label">教员姓名：</span>
            <span class="value">{{ currentApplication.teacherName }}</span>
          </div>
          <div class="detail-item">
            <span class="label">性别：</span>
            <span class="value">{{ currentApplication.gender }}</span>
          </div>
          <div class="detail-item">
            <span class="label">年龄：</span>
            <span class="value">{{ currentApplication.age }}</span>
          </div>
          <div class="detail-item">
            <span class="label">申请辅导科目：</span>
            <span class="value">{{ currentApplication.subject }}</span>
          </div>
          <div class="detail-item">
            <span class="label">最高学历：</span>
            <span class="value">{{ currentApplication.education }}</span>
          </div>
          <div class="detail-item">
            <span class="label">所在学校：</span>
            <span class="value">{{ currentApplication.school }}</span>
          </div>
          <div class="detail-item">
            <span class="label">所学专业：</span>
            <span class="value">{{ currentApplication.major }}</span>
          </div>
          <div class="detail-item">
            <span class="label">资格证书：</span>
            <span class="value">{{ currentApplication.certification }}</span>
          </div>
          <div class="detail-item">
            <span class="label">教学经历：</span>
            <span class="value">{{ currentApplication.teachingExp }}</span>
          </div>
          <div class="detail-item">
            <span class="label">个人介绍：</span>
            <span class="value">{{ currentApplication.introduction }}</span>
          </div>
          <div class="detail-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ currentApplication.phoneNumber }}</span>
          </div>
          <div class="detail-item">
            <span class="label">电子邮箱：</span>
            <span class="value">{{ currentApplication.email }}</span>
          </div>
          <div class="detail-item">
            <span class="label">期望时薪：</span>
            <span class="value">{{ currentApplication.hourlyRate }}</span>
          </div>
      </div>
    </el-dialog>
    <!-- 添加编辑对话框 -->
    <el-dialog title="修改申请资料" :visible.sync="editDialogVisible" width="700px">
      <el-form ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
        <!-- 复制原表单结构，将v-model改为editForm -->
        <el-form-item label="教员姓名" prop="teacherName">
          <el-input v-model="editForm.teacherName" />
        </el-form-item>
        <!-- 其他表单项... -->
        <el-form-item label="照片" prop="avatar">
          <image-upload v-model="editForm.avatar" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="editForm.gender" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input-number v-model="editForm.age" :min="18" :max="60" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="申请辅导科目" prop="subject">
          <el-input v-model="editForm.subject" placeholder="请输入申请辅导科目" />
        </el-form-item>
        <el-form-item label="最高学历" prop="education">
            <el-select v-model="editForm.education" placeholder="请选择最高学历">
              <el-option label="本科" value="本科" />
              <el-option label="硕士研究生" value="硕士研究生" />
              <el-option label="博士研究生" value="博士研究生" />
            </el-select>
        </el-form-item>
        <el-form-item label="所在学校" prop="school">
          <el-input v-model="editForm.school" placeholder="请输入所在学校" />
        </el-form-item>
        <el-form-item label="所学专业" prop="major">
          <el-input v-model="editForm.major" placeholder="请输入所学专业" />
        </el-form-item>
        <el-form-item label="资格证书" prop="certification">
          <el-input v-model="editForm.certification" placeholder="请输入资格证书" />
        </el-form-item>
        <el-form-item label="教学经历" prop="teachingExp">
            <el-input v-model="editForm.teachingExp" type="textarea" :rows="4" placeholder="请输入教学经历" />
        </el-form-item>
        <el-form-item label="个人介绍" prop="introduction">
            <el-input v-model="editForm.introduction" type="textarea" :rows="4" placeholder="请输入个人介绍" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber">
          <el-input v-model="editForm.phoneNumber" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="editForm.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        <el-form-item label="期望时薪" prop="hourlyRate">
          <el-input v-model="editForm.hourlyRate" placeholder="请输入期望时薪" />
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitEditForm">提交修改</el-button>
          <el-button @click="editDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { addApplication, getApplicationByUserId } from "@/api/application/application";

export default {
  name: "Application",
  data() {
    return {
      form: {
        teacherName: '',
        teacherId: localStorage.getItem("userId"),
        avatar: '',
        gender: '',
        age: null,
        subject: '',
        school: '',
        major: '',
        education: '',
        certification: '',
        teachingExp: '',
        introduction: '',
        phoneNumber: '',
        email: '',
        status: 'pending'
      },
      rules: {
        teacherName: [
          { required: true, message: "教员姓名不能为空", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "头像不能为空", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" }
        ],
        subject: [
          { required: true, message: "申请辅导科目不能为空", trigger: "blur" }
        ],
        school: [
          { required: true, message: "所在学校不能为空", trigger: "blur" }
        ],
        major: [
          { required: true, message: "所学专业不能为空", trigger: "blur" }
        ],
        education: [
          { required: true, message: "最高学历不能为空", trigger: "change" }
        ],
        certification: [
          { required: true, message: "资格证书不能为空", trigger: "blur" }
        ],
        teachingExp: [
          { required: true, message: "教学经历不能为空", trigger: "blur" }
        ],
        introduction: [
          { required: true, message: "个人介绍不能为空", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        email: [
          { required: true, message: "电子邮箱不能为空", trigger: "blur" },
          { type: 'email', message: "请输入正确的邮箱地址", trigger: "blur" }
        ],
        hourlyRate: [
          { required: true, message: "期望时薪不能为空", trigger: "blur" }
        ]
      },
      hasApplication: false,
      currentApplication: {},
      detailDialogVisible: false,
      pageTitle: '教员申请',
      editDialogVisible: false,
      editForm: {},
      editRules: {
        teacherName: [
          { required: true, message: "教员姓名不能为空", trigger: "blur" }
        ],
        avatar: [
          { required: true, message: "头像不能为空", trigger: "blur" }
        ],
        gender: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
        age: [
          { required: true, message: "年龄不能为空", trigger: "blur" }
        ],
        subject: [
          { required: true, message: "申请辅导科目不能为空", trigger: "blur" }
        ],
        school: [
          { required: true, message: "所在学校不能为空", trigger: "blur" }
        ],
        major: [
          { required: true, message: "所学专业不能为空", trigger: "blur" }
        ],
        education: [
          { required: true, message: "最高学历不能为空", trigger: "change" }
        ],
        certification: [
          { required: true, message: "资格证书不能为空", trigger: "blur" }
        ],
        teachingExp: [
          { required: true, message: "教学经历不能为空", trigger: "blur" }
        ],
        introduction: [
          { required: true, message: "个人介绍不能为空", trigger: "blur" }
        ],
        phoneNumber: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ],
        email: [
          { required: true, message: "电子邮箱不能为空", trigger: "blur" },
          { type: 'email', message: "请输入正确的邮箱地址", trigger: "blur" }
        ],
        hourlyRate: [
          { required: true, message: "期望时薪不能为空", trigger: "blur" }
        ]
      },
    };
  },
  computed: {
    statusPercentage() {
      return {
        'pending': 60,
        'approved': 100,
        'rejected': 0
      }[this.currentApplication.status] || 30
    },
    statusColor() {
      return {
        'pending': '#E6A23C',  // 对应$--warning的颜色值
        'approved': '#67C23A', // 对应$--success
        'rejected': '#F56C6C'  // 对应$--danger
      }[this.currentApplication.status]
    },
    statusIcon() {
      return {
        'pending': 'el-icon-loading',
        'approved': 'el-icon-success',
        'rejected': 'el-icon-error'
      }[this.currentApplication.status]
    },
    applicationStatus() {
      if (this.currentApplication.status === 'pending') {
        return '审核中';
      } else if (this.currentApplication.status === 'approved') {
        return '已通过';
      } else if (this.currentApplication.status === 'rejected') {
        return '已拒绝';
      }
      return '未知状态';
    },
    statusTagType() {
    return {
      'pending': 'warning',
      'approved': 'success',
      'rejected': 'danger'
    }[this.currentApplication.status] || 'info'
  }
  },
  // created() {
  //   this.checkApplicationStatus();
  // },
  mounted() {
    this.checkApplicationStatus();
  },
  methods: {
    checkApplicationStatus() {
      const roleName = localStorage.getItem("roleName");
      if (roleName == '教员') {
        getApplicationByUserId(localStorage.getItem("userId")).then(response => {
          if (response && (response.status === 'pending' || response.status === 'approved')) {
            this.hasApplication = true;
            this.currentApplication = response;
            if (response.status === 'pending') {
              this.pageTitle = '教员资格申请中·······';
            } else if (response.status === 'approved') {
              this.pageTitle = '您已取得平台认证的教员资格';
            }
          }
        });
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
            addApplication(this.form).then(response => {
            this.$modal.msgSuccess("申请提交成功，请等待审核");
            this.hasApplication = true;
            this.currentApplication = this.form;
            this.pageTitle = '教员资格申请中······';
          });
        }
      });
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.form = {
        teacherName: '',
        teacherId: localStorage.getItem("userId"),
        avatar: '',
        gender: '',
        age: null,
        subject: '',
        school: '',
        major: '',
        education: '',
        certification: '',
        teachingExp: '',
        introduction: '',
        phoneNumber: '',
        email: '',
        status: 'pending',
        hourlyRate: ''
      };
    },
    showApplicationDetail() {
      this.detailDialogVisible = true;
    },
    showEditDialog() {
      this.editForm = { ...this.currentApplication };
      this.editDialogVisible = true;
    },
    
    submitEditForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          updateApplication(this.editForm).then(() => {
            this.$modal.msgSuccess("修改成功");
            this.editDialogVisible = false;
            this.checkApplicationStatus(); // 重新获取最新数据
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$--primary: #5B8FF9; // 科技蓝
$--success: #67C23A; // 生态绿
$--warning: #E6A23C; // 琥珀黄
$--danger: #F56C6C; // 珊瑚红
$--gradient-blue: linear-gradient(135deg, #6B8DD6 0%, #8E37D7 100%);

.progress-label {
  text-align: center;
  i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
  }
}
.status-header {
  h3 {
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .el-tag {
    font-size: 14px;
    height: 28px;
    line-height: 26px;
  }
}

.basic-info {
  p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    
    i {
      font-size: 16px;
      color: #409EFF;
    }
    
    span {
      min-width: 80px;
    }
  }
}

.application-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);

  .page-title {
    font: 600 28px/1.2 'PingFang SC', system-ui;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 2rem;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: $--gradient-blue;
      border-radius: 2px;
    }
  }

  .el-form {
    .el-input__inner {
      transition: border-color 0.3s ease;
      &:focus {
        border-color: #409EFF;
        box-shadow: 0 0 8px rgba(64,158,255,0.2);
      }
    }

    .el-textarea__inner {
      resize: vertical;
      min-height: 100px;
    }
  }

  .image-upload {
    border: 2px dashed #dcdfe6;
    border-radius: 8px;
    padding: 1rem;
    transition: border-color 0.3s;
    
    &:hover {
      border-color: #409EFF;
    }
  }

  .application-form {
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: -20%; right: -10%;
      width: 240px; height: 240px;
      background: radial-gradient(rgba(91,143,249,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .el-form-item {
      margin-bottom: 25px;
    }

    .el-button {
      font-weight: 500 !important;
      letter-spacing: 0.5px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
      
      &::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 300%; height: 300%;
        background: rgba(255,255,255,0.15);
        transform: translate(-50%, -50%) scale(0);
        border-radius: 50%;
        transition: transform 0.6s;
      }

      &:active::after {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
      }

      &--primary {
        background: linear-gradient(135deg, #409EFF, #3375ff);
        border: none;
        box-shadow: 0 4px 14px rgba(91,143,249,0.35);
        
        &:hover {
          opacity: 0.9;
          transform: translateY(-2px);
        }
      }
      
      &--warning {
        background: linear-gradient(135deg, #e6a23c, #d48836);
        border: none;
      }
    }

    .el-card {
      border-radius: 16px !important;
      background: rgba(255,255,255,0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.1);

      &::before { background: $--gradient-blue } // 渐变边框

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
      }

      &__header {
        padding: 24px;
        background: linear-gradient(95deg, #f9fafe 0%, #ffffff 100%);
        border-bottom: 1px solid rgba(0,0,0,0.05);
      }
    }

    .status-header {
      h3 {
        font-weight: 600;
        color: #2c3e50;
        small {
          display: block;
          font-size: 14px;
          color: #7f8c8d;
          margin-top: 4px;
        }
      }
    }
  }

  .application-status {
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    position: relative;
    &::before {
      content: '';
      position: absolute;
      top: -2px; right: -2px; bottom: -2px; left: -2px;
      background: $--gradient-blue;
      border-radius: 18px;
      z-index: -1;
    }

    .status-content {
      .status-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h3 {
          margin: 0;
          color: #303133;
        }
      }

      .status-tag {
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 500;
        
        &--pending {
          background: #fff3cd;
          color: #856404;
        }
        &--approved {
          background: #d4edda;
          color: #155724;
        }
        &--rejected {
          background: #f8d7da;
          color: #721c24;
        }
      }

      .basic-info {
        p {
          padding: 12px;
          background: #f8f9fa;
          border-radius: 8px;
          transition: background 0.3s;
          
          &:hover {
            background: #e9ecef;
          }
          
          i {
            font-size: 18px;
            width: 28px;
            text-align: center;
          }
        }
      }
    }
  }

  .detail-content {
    background: url('data:image/svg+xml,<svg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"><path fill="%23f5f7fa" d="M52 0H0v26l13-13L26 0l13 13L52 0z"/></svg>');
    background-size: 12px;
    padding: 2rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 4px;
      background: $--gradient-blue;
    }

    .detail-item {
      margin-bottom: 15px;
      display: flex;
      align-items: flex-start;

      .label {
        width: 120px;
        font: 500 15px/1.5 'SF Mono', monospace;
        color: #7a7d95;
        letter-spacing: 0.05em;
        text-align: right;
        margin-right: 10px;
      }

      .value {
        flex: 1;
        font: 500 16px/1.6 'Inter', sans-serif;
        color: #2d3047;
        word-break: break-all;
      }
    }
  }
}
</style>
